<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>发现</title>

  <link rel="stylesheet" href="/Static/layui/css/layui.css">
  <style>

  </style>
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">查找用户</li>
    <li>查找群</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
      <form action="/find" method="get">
        <div class="layui-form-item">
          <div class="layui-col-xs10"> <input type="text" name="key" value="{{$key}}" placeholder="请输入id/name" autocomplete="off" class="layui-input"></div>
          <div class="layui-col-xs2"><button type="submit" class="layui-btn">搜索</button></div>
        </div>
      </form>
      @foreach($lists as $val)
      <div class="layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">{{$val['username']}}({{$val['id']}})</div>
          <div class="layui-card-body">
            <img src="{{$val['avatar']}}" width="100px" height="100px">
            <button class="layui-btn layui-btn-sm add-friend" data-avatar="{{$val['avatar']}}" data-username="{{$val['username']}}" data-fuid="{{$val['id']}}">添加</button>
          </div>
        </div>
      </div>
      @endforeach
  </div>
    <div class="layui-tab-item">
      <div class="layui-form-item">
        <div class="layui-col-xs10"> <input type="text" name="title" required  lay-verify="required" placeholder="请输入id/name" autocomplete="off" class="layui-input"></div>
        <div class="layui-col-xs2"><button type="button" class="layui-btn">搜索</button><button type="button" class="layui-btn">创建群</button></div>
      </div>
    </div>
</div>
</div>


<script src="/Static/layui/layui.js"></script>
<script>
    layui.use(['layim', 'laypage','element'], function(){
        var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,laypage = layui.laypage
            ,element = layui.element;

        //一些添加好友请求之类的交互参见文档

        $(".add-friend").click(function () {
            var fuid = $(this).attr('data-fuid');
            layim.add({
                type: 'friend' //friend：申请加好友、group：申请加群
                ,username: $(this).attr('data-username') //好友昵称，若申请加群，参数为：groupname
                ,avatar: $(this).attr('data-avatar') //头像
                ,submit: function(group, remark, index){ //一般在此执行Ajax和WS，以通知对方
                    // console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
                    // console.log(remark); //获取附加信息
                    $.ajax({
                        url:"/addfriend",
                        data:{token:localStorage.getItem('token'),fuid:fuid,msg:remark,group:group},
                        dataType:"json",
                        type:"post",
                        success:function (res) {
                            layer.msg(res.msg)
                            if(res.code == 0)
                            {
                                parent.sendMsg({action:'addfriend',token:localStorage.getItem('token'),fuid:fuid,msg:remark,group:group})
                            }
                        },
                        error:function (err) {
                            console.log("err = ",err)
                        }
                    })
                    layer.close(index); //关闭改面板
                }
            });


            // console.log($(this).attr('data-fuid'),localStorage.getItem('token'));
            // layer.prompt({formType:2,title:'验证消息'},function(value, index, elem){
            //     // alert(value); //得到value
            //     $.ajax({
            //         url:"/addfriend",
            //         data:{token:localStorage.getItem('token'),fuid:$(this).attr('data-fuid'),msg:value},
            //         dataType:"json",
            //         type:"post",
            //         success:function (res) {
            //             layer.msg(res.msg)
            //         },
            //         error:function (err) {
            //             console.log("err = ",err)
            //         }
            //     })
            //     layer.close(index);
            // });

        })
    });
</script>
</body>
</html>
